
<template>
  <div style="margin-top: 0px; overflow: hidden">
    <!--块类统计-->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          <h3>工作时间</h3>
          <div>
            <i class="el-icon-s-shop" style="color: purple"></i>
            <span>{{ data.workTime }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <h3>接待客户</h3>
          <div>
            <i class="el-icon-s-flag" style="color: red"></i>
            <span>{{data.jiedai}}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <h3>平均时间</h3>
          <div>
            <i class="el-icon-s-flag" style="color: green"></i>
            <span>{{ data.pingjunTime }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <h3>会话总数</h3>
          <div>
            <i class="el-icon-star-on" style="color: blue"></i>
            <span>{{ data.huihua }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--acharts统计图-->
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="box-card">
          <echarts1 />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <echarts2 />
        </el-card>
        <el-card class="box-card">
          <echarts3 />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
   
  <script>
import Cookies from "js-cookie";
import echarts1 from "../../components/ciyun/echarts1.vue";
import echarts2 from "../../components/ciyun/echarts2.vue";
import echarts3 from "../../components/ciyun/echarts3.vue";
export default {
  name: "home",
  data() {
    return {
      data: {},
    };
  },
  methods: {
    getList() {
      var user = Cookies.get("kefu");
      if (user === "" || user === null || user === undefined) {
        this.$router.push("login");
      }
      var u= JSON.parse(user);
      const id = this.$route.query.id;
      this.$http.get("/kefu/getIdex?id=" + u.id).then((res) => {
        console.log(res);
        this.data = res.data.data;
      });
    },
  },
  created() {
    this.getList();
  },
  components: {
    echarts1,
    echarts2,
    echarts3,
  },
};
</script>
   
  <style scoped>
.el-card {
  margin-top: 20px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: rgba(255, 254, 254, 0.7);
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
/* 隐藏元素的滚动条，同时保留滚动功能 */
.element::-webkit-scrollbar {
  display: none; /* 针对WebKit浏览器 */
}

.element {
  -ms-overflow-style: none; /* 针对IE和Edge */
  scrollbar-width: none; /* 针对Firefox */
}
</style>